<template>
  <view>
    <!-- 导航区 -->
    <view class="header">
      <view :class="{active: tabIndex === 0}" @click="tab(0)">全部</view>
      <view :class="{active: tabIndex === 1}" @click="tab(1)">我的订单</view>
      <view :class="{active: tabIndex === 2}" @click="tab(2)">我帮助的</view>
      <view :class="{active: tabIndex === 3}" @click="tab(3)">正在悬赏</view>
    </view>
    <!-- 全部区域 -->
    <view class="allItem" v-if="tabIndex === 0">
      <view class="item" v-for="(item,index) in allMsg" :key="index">
        <view class="head">
          <!-- <image :src="item.orderInfo.user_pic ? item.orderInfo.user_pic : '../../static/icon/user.png'" mode=""></image> -->
          <image src="../../static/icon/user.png" mode=""></image>
          <view class="userInfo">
            <text>{{item.type}}</text> <br>
            <text style="color: #dddcdb; font-size: 24rpx;">{{item.create_time}}</text>
          </view>
        </view>
        <view class="nav">
          <text>{{item.orderInfo.helpContent}}</text>
        </view>
        <view class="address" v-if="item.state === 2">
          <text style="color: #b0d6f1; font-size: 24rpx;">订单已完成，相关信息已隐藏。</text>
        </view>
        <view class="isShow" v-else>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">目的地：{{item.address}}</text>
          </view>
        </view>

        <view class="btn">
          <view class="price">金额￥{{item.money}}</view>
          <view class="jieD" v-if="item.state === 0">接单</view>
          <view class="jieD" v-if="item.state === 1">完成</view>
        </view>
        <view style="font-size: 16rpx" class="sign1" v-if="item.state === 0">未完成</view>
        <view style="font-size: 16rpx" class="sign2" v-else-if="item.state === 1">已接单</view>
        <view style="font-size: 16rpx" class="sign3" v-else>已完成</view>
      </view>
    </view>
    <!-- 我的订单区域 -->
    <view class="orderItem" v-else-if="tabIndex === 1">
      <view class="item" v-for="item in myOrder" :key="item.id">
        <view class="head">
          <!-- <image :src="item.orderInfo.user_pic ? item.orderInfo.user_pic : ''" mode=""></image> -->
          <image src="../../static/icon/user.png" mode=""></image>
          <view class="userInfo">
            <text>{{item.type}}</text> <br>
            <text style="color: #dddcdb; font-size: 24rpx;">{{item.create_time}}</text>
          </view>
        </view>
        <view class="nav">
          <text>{{item.orderInfo.helpContent}}</text>
        </view>
        <view class="address" v-if="item.status === 2">
          <text style="color: #b0d6f1; font-size: 24rpx;">订单已完成，相关信息已隐藏。</text>
        </view>
        <view class="isShow" v-else>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">目的地：{{item.address}}</text>
          </view>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">取件码：{{item.orderInfo.qjm ? item.orderInfo.qjm : ''}}</text>
          </view>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">联系方式：{{item.orderInfo.phone ? item.orderInfo.phone : ''}}</text>
          </view>
        </view>
        <view class="btn">
          <view class="price">金额￥{{item.price ? item.price : 0}}</view>
          <view class="jieD" v-if="item.state === 0">接单</view>
          <view class="jieD" v-if="item.state === 1">完成</view>
        </view>
        <view style="font-size: 16rpx" class="sign1" v-if="item.state === 0">未完成</view>
        <view style="font-size: 16rpx" class="sign2" v-else-if="item.state === 1">已接单</view>
        <view style="font-size: 16rpx" class="sign3" v-else>已完成</view>
      </view>
    </view>
    <!-- 我帮助的区域 -->
    <view class="helpItem" v-else-if="tabIndex === 2">
      <view class="item" v-for="(item,index) in helpInfo" :key="index">
        <view class="head">
          <image :src="item.imgUrl" mode=""></image>
          <view class="userInfo">
            <text>{{item.userName}}</text> <br>
            <text style="color: #dddcdb; font-size: 24rpx;">{{item.date}}</text>
          </view>
        </view>
        <view class="nav">
          <text>{{item.detailed}}</text>
        </view>
        <view class="address" v-if="item.status === 2">
          <text style="color: #b0d6f1; font-size: 24rpx;">订单已完成，相关信息已隐藏。</text>
        </view>
        <view class="isShow" v-else>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">目的地：{{item.address}}</text>
          </view>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">联系方式：{{item.phone}}</text>
          </view>
        </view>
        <view class="btn">
          <view class="price">金额￥{{item.price}}</view>
          <view class="jieD" v-if="item.status === 0">接单</view>
          <view class="jieD" v-if="item.status === 1">完成</view>
        </view>
        <view style="font-size: 16rpx" class="sign1" v-if="item.status === 0">未完成</view>
        <view style="font-size: 16rpx" class="sign2" v-else-if="item.status === 1">已接单</view>
        <view style="font-size: 16rpx" class="sign3" v-else>已完成</view>
      </view>
    </view>
    <!-- 正在悬赏区域 -->
    <view class="rewItem" v-else>
      <view class="item" v-for="(item,index) in rewInfo" :key="index">
        <view class="head">
          <image :src="item.imgUrl" mode=""></image>
          <view class="userInfo">
            <text>{{item.userName}}</text> <br>
            <text style="color: #dddcdb; font-size: 24rpx;">{{item.date}}</text>
          </view>
        </view>
        
        <view class="nav">
          <text>{{item.detailed}}</text>
        </view>
        
        <view class="address" v-if="item.status === 2">
          <text style="color: #b0d6f1; font-size: 24rpx;">订单已完成，相关信息已隐藏。</text>
        </view>
        <view class="isShow" v-else>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">目的地：{{item.address}}</text>
          </view>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">取件码：{{item.qjm}}</text>
          </view>
          <view class="address">
            <text style="color: #b0d6f1; font-size: 24rpx;">联系方式：{{item.phone}}</text>
          </view>
        </view>
        <!-- 按钮区 -->
        <view class="btn">
          <view class="price">金额￥{{item.price}}</view>
          <view class="jieD" v-if="item.status === 0">接单</view>
          <view class="jieD" v-if="item.status === 1">完成</view>
        </view>
        <!-- 小标题 -->
        <view style="font-size: 16rpx" class="sign1" v-if="item.status === 0">未完成</view>
        <view style="font-size: 16rpx" class="sign2" v-else-if="item.status === 1">已接单</view>
        <view style="font-size: 16rpx" class="sign3" v-else>已完成</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { orderAll, orderStuNumAll, getMyHelp } from '../../request/api'
  export default {
    data() {
      return {
        tabIndex: 0,
        // 我帮助的数据
        helpInfo: [{
            imgUrl: '../../static/icon/user.png',
            userName: '校园跑腿',
            date: '2024年12月25日16:50:11',
            status: 2, //0未完成 1已接单  2已完成
            detailed: '我倒是打卡搜封ID覅发山东阿打算大萨达所多手扒鸡富婆啊',
            address: '教学区-1号楼-111',
            price: '3',
            phone: '17633133333'
          },
          {
            imgUrl: '../../static/icon/user.png',
            userName: 'test1',
            date: '2024年12月25日16:50:11',
            status: 0, //0未完成 1已接单  2已完成
            detailed: '我倒是打卡搜封ID覅发山东阿打算大萨达所多手扒鸡富婆啊',
            address: '教学区-1号楼-111',
            price: '3',
            qjm: '12-25',
            phone: '17633133333'
          },
          {
            imgUrl: '../../static/icon/user.png',
            userName: 'test1',
            date: '2024年12月25日16:50:11',
            status: 1, //0未完成 1已接单  2已完成
            detailed: '我倒是打卡搜封ID覅发山东阿打算大萨达所多手扒鸡富婆啊',
            address: '教学区-1号楼-111',
            price: '3',
            qjm: '12-25',
            phone: '17633133333'
          },
        ],
        // 正在悬赏数据
        rewInfo: [{
            imgUrl: '../../static/icon/user.png',
            userName: '校园跑腿',
            date: '2024年12月25日16:50:11',
            status: 2, //0未完成 1已接单  2已完成
            detailed: '我倒是打卡搜封ID覅发山东阿打算大萨达所多手扒鸡富婆啊',
            address: '教学区-1号楼-111',
            price: '3',
            phone: '17633133333'
          },
          {
            imgUrl: '../../static/icon/user.png',
            userName: 'test1',
            date: '2024年12月25日16:50:11',
            status: 0, //0未完成 1已接单  2已完成
            detailed: '我倒是打卡搜封ID覅发山东阿打算大萨达所多手扒鸡富婆啊',
            address: '教学区-1号楼-111',
            price: '3',
            qjm: '12-25',
            phone: '17633133333'
          },
          {
            imgUrl: '../../static/icon/user.png',
            userName: 'test1',
            date: '2024年12月25日16:50:11',
            status: 1, //0未完成 1已接单  2已完成
            detailed: '我倒是打卡搜封ID覅发山东阿打算大萨达所多手扒鸡富婆啊',
            address: '教学区-1号楼-111',
            price: '3',
            qjm: '12-25',
            phone: '17633133333'
          },
        ],
        allMsg: [],
        myOrder: []
     }
    },
    onShow(){
      this.allOrder()
      this.myOrderAll()
      this.getMyHelpAll()
    },
    methods: {
      // tab切换
      tab(n) {
        this.tabIndex = n
      },
      // 获取全部订单
      allOrder(){
        orderAll().then((res) => {
          // console.log(JSON.parse(res.orderList[0].orderInfo))
          this.allMsg = res.orderList
          // console.log(allMsg);
          this.allMsg.forEach((item) => {
            item.orderInfo = JSON.parse(item.orderInfo)
          })
          // console.log(this.allMsg)
        }).catch((err) => {
          console.log(err)
        })
      },
      // 根据id获取订单
      myOrderAll(){
        const id = uni.getStorageSync('userInfo').id
        orderStuNumAll('', id).then((res) => {
          // console.log('myOrderAll', res)
          this.myOrder = res.order
          this.myOrder.forEach((item) => {
            item.orderInfo = JSON.parse(item.orderInfo)
          })
          // console.log('myOrderAll', this.myOrder)
        }).catch((err) => {
          console.log(err)
        })
      },
      // 获取我帮助的信息
      getMyHelpAll(){
        const id = uni.getStorageSync('userInfo').id
        getMyHelp('', id).then(res => {
          // console.log('5465465165465465465465465');
          // console.log('getMyHelpAll', res)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
</script>

<style>
  page {
    background-color: #ecedee;
  }

  .header {
    width: 100%;
    height: 100rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header view {
    width: 25%;
    height: 98rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    color: #b1cfed;
    border-bottom: 2rpx solid #b1cfed;
  }

  .item {
    width: 84%;
    padding: 20rpx;
    margin: 24rpx auto;
    margin-bottom: 24rpx;
    border-radius: 10rpx;
    position: relative;
    background-color: #ffffff;
  }

  .head {
    display: flex;
  }

  .head image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }

  .nav {
    width: 100%;
    margin: 16rpx auto;
  }

  .nav text {
    width: 100%;
    white-space: pre-wrap;
  }

  .btn {
    display: flex;
    justify-content: flex-end;
    text-align: center;
    align-items: center;
  }

  .price {
    width: 140rpx;
    height: 70rpx;
    background-color: pink;
    margin-left: 30rpx;
    border-radius: 14rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .jieD {
    width: 140rpx;
    height: 70rpx;
    color: white;
    background-color: #1769cb;
    margin-left: 30rpx;
    border-radius: 14rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* 是否接单小图标 */
  .sign1 {
    color: #cbcd6e;
    background-color: #fdfdd8;
    padding: 4rpx 8rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
  }

  .sign2 {
    color: white;
    background-color: #0385fe;
    padding: 4rpx 8rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
  }

  .sign3 {
    color: #aece9d;
    background-color: #effded;
    padding: 4rpx 8rpx;
    position: absolute;
    top: 20rpx;
    right: 40rpx;
  }
</style>